import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Table, Input, message, Icon } from 'antd';
import fetch from 'dva/fetch';
import { stringify } from 'qs';
import styles from './ShopGoods.less';
import { searchStatistic, searchNew7 } from '../../services/tool';
import { ORIGIN } from '../../constants';
import $ from 'jquery';
import { testData } from './searchAuction';

const Search = Input.Search;

const data_goods = testData;
const data_store = [{
  "id": 1223,
  "name": "早上好店",
  "tags": 'xsdc',
  "level": 1,
  "favorableRate": "89%",
  "DSR": "4.77",
  "collect": "12345",
  "goodsSum": "223",
  "price": 144,
  "luxury": 12,
  "qualityGoods": 21,
  "new": 32,
  "tendency": 12,
  "feature": 22
}];
const data_pool = [{
  "id": 13,
  "num": 1,
  "pool": '有好货',
  "goodsSum": 12
}]


export default class ShopGoods extends PureComponent {
  state = {
    sevenValue: '',
    qualitValue: '',
    sevenVisible: -1,
    qualitList: [],
    kuaixuanUrl:''
  }

  async componentDidMount() {
    const url = "https://kxuan.taobao.com/searchSp.htm?ajax=true&_ksTS=1524724819663_379&callback=jsonp380&q=&id=220&kxuan_uplus_item=127039&searchtype=item&ruletype=1";
   $.ajax({
        url:url,
        dataType:'jsonp',
        async:true,
        type:'get',
        success: (data) => {
          console.log(data);
        },
        error:function(XMLHttpRequest, textStatus, errorThrown) {

        }
      });
       
  }

 handleGetGoodsId = async () => {
    const { activityId, taskChannel, taskActivity, wetaoUser } = this.props;
    let tempUrl = 'https://we.taobao.com/material/square/detail?kxuanParam=%7B%22nested%22%3A%22we%22%2C%22id%22%3A%220%22%7D';
    // let data = taskChannel.find(item => item.id === activityId && item.selectItemData);
    // if (!data) data = taskActivity.find(item => item.id === activityId && item.selectItemData);
    // if (data) {
    //   tempUrl = data.selectItemData.url;
    // }
    // const urlObj = url.parse(tempUrl);
    // const urlQuery = querystring.parse(urlObj.query);
    // const kxuan = JSON.parse(decodeURIComponent(urlQuery.kxuanParam));
    const publicKxuanUrl = `https://kxuan.taobao.com/searchSp.htm?ajax=true&_ksTS=1524724819663_379&callback=jsonp380&q=&id=220&kxuan_uplus_item=127039&searchtype=item&ruletype=1`;
    // if (wetaoUser && wetaoUser.type !== '微淘号·达人') {
    //   tempUrl = publicKxuanUrl;
    // }
    tempUrl = publicKxuanUrl;
    this.setState({
      kuaixuanUrl: tempUrl,
    });
  }


  render() {
    const columns_store = [
      {
        title: '店铺名',
        dataIndex: 'name'
      },
      {
        title: '店铺标签',
        dataIndex: 'tags'
      },
      {
        title: '信用等级',
        dataIndex: 'level'
      },
      {
        title: '好评率',
        dataIndex: 'favorableRate'
      },
      {
        title: 'DSR',
        dataIndex: 'DSR'
      },
      {
        title: '店铺收藏',
        dataIndex: 'collect'
      },
      {
        title: '宝贝数',
        dataIndex: 'goodsSum'
      },
      {
        title: '客单价',
        dataIndex: 'price'
      },
      {
        title: '奢侈品',
        dataIndex: 'luxury'
      },
      {
        title: '精品',
        dataIndex: 'qualityGoods'
      },
      {
        title: '新品',
        dataIndex: 'new'
      },
      {
        title: '趋势品',
        dataIndex: 'tendency'
      },
      {
        title: '特色品',
        dataIndex: 'feature'
      }
    ];
    const columns_goods = [
      {
        title: '宝贝标题',
        dataIndex: 'title',
        render: (val ,record) => <div dangerouslySetInnerHTML={{__html: val}} />,
        width:'240px'
      },
      {
        title: '宝贝标签',
        dataIndex: 'icon',
        render(val,record){
          const icons = val.map((item,index)=>
              <label key={`icons1${index}`} className={styles[`${item.dom_class}`]} style={{marginRight:'8px'}}></label>
           )
          return (
            <div style={{position:'relative'}}>{icons}</div>
            )
          }
      },
      {
        title: '新七条',
        dataIndex: 'new7',
        render(val,record){
          const str = record.icon && record.icon.find(item => /新7条|新七条|营销/.test(item.innerText));
          return str ? '符合' : '不符合';
        }
      },
      {
        title: '有好货入库',
        dataIndex: 'goodGoods',
      },
      {
        title: '宝贝收藏',
        dataIndex: 'collect',
      },
      {
        title: '好评率',
        dataIndex: 'favorableRate',
      },
      {
        title: '月销',
        dataIndex: 'sale',
      },
      {
        title: '售价',
        dataIndex: 'view_price',
      },
      {
        title: '淘客比例',
        dataIndex: 'taoke',
      },
      {
        title: '淘客佣金',
        dataIndex: 'commission',
      }
    ];
    const columns_pool = [
      {
        title:'序号',
        dataIndex:'num'
      },{
        title:'选品池',
        dataIndex:'pool'
      },{
        title:'商品数量',
        dataIndex:'goodsSum'
      },{
        title:'操作',
        render(){
          return(
            <a>详情</a>
            )
        }
      }
    ]
    return (
      <Card bordered={false}>
        <div>
          <p className={styles.tbSearchTit}>店铺商品检测</p>
          <div className={styles.searchBox} style={{ position: 'relative' }}>
            <Search
              placeholder="输入店铺名或商品链接"
              enterButton="搜索"
              size="large"
              onSearch={this.handleGetGoodsId}
              // onChange={(e) => this.setState({ kuaixuanUrl: e.target.value })}
              value={this.state.kuaixuanUrl}
            />
            <Icon type="close-circle" className={styles.clearInpIcon} onClick={this.clearInpValDown} />
          </div>
          <div className={styles.dataList}>
            <Table
              pagination={{ pageSize: 15 }}
              dataSource={data_store}
              size="small"
              columns={columns_store}
              rowKey="id1"
            />
            <Table
              pagination={{ pageSize: 15 }}
              dataSource={testData}
              size="small"
              columns={columns_goods}
              rowKey={`${testData.user_id}`}
            />
          </div>
          <div className={styles.dataList}>
            <Table 
              pagination={{ pageSize: 15 }}
              dataSource={data_pool}
              size="small"
              columns={columns_pool}
              rowKey="id3"
              />
          </div>
        </div>
      </Card>
    );
  }
}
